<template>
	<view>
		<view class="mainpadding_top ffffff flexbetween" @click="show=true">
			<view class="titletext xiaohei bold">{{feedType?feedType:$t('yjfk.fklx')}}</view>
			<u-icon name="arrow-right" color="#333" size="20"></u-icon>
		</view>
		<view class="mainpadding_top ffffff">
			<textarea class="textarea" maxlength="300" :placeholder="$t('yjfk.wzjy')" v-model="content"></textarea>
		<view class="flexleft flex_wrap">
			<view class="flexcenter tpbox " v-for="(ite,ind) in picUrls" :key="ind">
				<view class="tjtp">
					<image class="tjtpimg radius" :src="ite" mode=""></image>
					<view class="deleteimg" @click="deleteimg(ind,picUrls)"></view>
				</view>
			</view>
			<view class="flexcenter tpbox " v-if="picUrls.length<3" @click="uploadImg(3,picUrls)">
				<image class="tjtp" src="@/static/image/system/upimg.png" mode=""></image>
			</view>
		</view>
		</view>
		<view class="margin_top xiaohui" style="margin-left: 30rpx;">
			{{$t('yjfk.sjhm')}}
		</view>
		
		<view class="mainpadding_top ffffff flexbetween">
			<input type="number" :placeholder="$t('yjfk.fblx')" name="" id="" v-model="mobile">
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="submit">{{$t('yjfk.tj')}}</view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				images_text:[],
				images:[],
				columns:[
					[this.$t('yjfk.spxg'), this.$t('yjfk.gdyc'), this.$t('yjfk.yhjy'),this.$t('yjfk.qt')]
				],
				content:"",
				feedType:"",
				mobile:"",
				picUrls:[],
				show:false
			}
		},
		methods: {
			submit(){
				if(this.feedType==""){
					httpRequest.toast(this.$t('yjfk.fklx'))
					return false
				}
				if(this.content==""){
					httpRequest.toast(this.$t('yjfk.qsrfknr'))
					return false
				}
				if(this.mobile==""){
					httpRequest.toast(this.$t('yjfk.qsrlxdh'))
					return false
				}
				let url = "/wx/feedback/submit"
				let data = {
					content:this.content,
					feedType:this.feedType,
					hasPicture:this.picUrls.length?true:false,
					mobile:this.mobile,
					picUrls:this.picUrls,
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.errmsg)
					if(res.errno==0){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			confirm(e){
				this.feedType = e.value[0]
				this.show=false
			},
			deleteimg(index,upImgs_text) {
				upImgs_text.splice(index, 1)
			},
			uploadImg(value, upImgs_text) {
				let _this = this;
				let num = 1
				if (value > 2) {
					num = Number(value) - upImgs_text.length;
					if (num <= 0) {
						return false;
					}
				}
				uni.showActionSheet({
					itemList: [_this.$t('system.xiangji'), _this.$t('system.xiangce')],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/wx/storage/upload', url).then(res => {
					this.picUrls.push(res.url)
				}).catch(err => {});
			},
		}
	}
</script>

<style>
.textarea{
	height: 300rpx;
	width: 100%;
}
</style>
